﻿<!DOCTYPE html>
<html>
<head>
    <title>用户管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/icheck-bootstrap.css">
    <!--bootStrop css 主样式-->
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/bootstrap-select.css">
    <!--loading样式-->
    <link rel="stylesheet" href="files/用户管理/loading.css">
    <!--jquery js-->
    <script src="resources/scripts/assets/js/jquery-2.2.3.min.js"></script>
    <!--bootStrop js-->
    <script src="resources/scripts/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="resources/scripts/assets/bootstrap/js/bootstrap-select.min.js"></script>
    <!--angular js-->
    <script src="resources/scripts/angular/angular.min.js"></script>
    <!--自定义 js-->
    <script src="files/用户管理/data.js"></script>
</head>
<body ng-app="user" ng-controller="userView" id="userView">
<div id="title"></div>
<div class="col-md-offset-1 col-lg-offset-1 col-xs-offset-1 col-sm-offset-1">
    <span class="h4 pull-left" style="color: #0a6cd6"><strong>用户管理</strong></span>
    <span id="state" class="col-lg-offset-9"></span><br/>
</div>
<h6 class="page-header"></h6>
<div style="width: 95%;background-color: rgba(42,171,210,0.37);margin:auto;height: 150px">
    <br/>
    <form class="form-inline">
        <div class="col-lg-3">
            <div class="form-group">
                <label>用户id:</label>
                <input type="number" min="1" class="form-control" id="id" placeholder="用户id"
                       ng-model="user.ids">
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label>姓名:</label>
                <input type="text" class="form-control" id="name" placeholder="姓名" ng-model="user.name">
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label>性别:</label>
                <select class="form-control" id="sex">
                    <option value="请选择">请选择</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <br/>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label>电话:</label>
                <input type="text" class="form-control" id="phone" placeholder="电话" ng-model="user.phone">
            </div>
            <br/><br/>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                &nbsp;&nbsp;&nbsp;<label>邮箱:</label>
                <input type="email" class="form-control" id="email" placeholder="邮箱" ng-model="user.email">
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label>密码:</label>
                <input type="password" class="form-control" id="password" placeholder="密码" ng-model="user.password">
            </div>
        </div>
        <div class="col-lg-3"></div>
        <div class="col-lg-3">
            &emsp;&emsp;&emsp;<input type="button" class="btn btn-info" value="检索" ng-click="selectByUserLike()">
            <input type="reset" class="btn btn-info" value="清空">
        </div>
        <div class="col-lg-3">
            <br/>
            &emsp;&emsp;&emsp;&emsp;
        </div>
        <br/><br/><br/><br/>
    </form>
</div>
<br/>
<div>
    <div class="spinner" style="padding-right: 0px;text-align: right;">
        <br/>
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    <br/>
    &emsp;&emsp;&emsp;&emsp;
    <input type="button" class="btn btn-info" value="新增" data-toggle="modal" data-target="#myModal1">
    <input type="button" class="btn btn-info" value="修改" ng-click="selectByUserId()">
    <input type="button" class="btn btn-info" value="删除" ng-click="remove('remove')">
    <br/><br/>
    <table class="table table-hover table-bordered" style="width: 95%;text-align: center;margin:auto">
        <tr style="background-color: #57bfda;color: #ecf0f1">
            <td><input type="checkbox" id="all"></td>
            <td>用户id</td>
            <td>用户姓名</td>
            <td>性别</td>
            <td>电话</td>
            <td>邮箱</td>
            <td>科室</td>
        </tr>
        <tr ng-repeat="item in data" class="data">
            <td><input type="checkbox" name="box" class="check" value="{{item.id}}"></td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.email}}</td>
            <td>
                <span ng-repeat="department in item.responsibleDepartment">{{department.responsibleDepartment}}&emsp;</span>
            </td>
        </tr>
    </table>
    <br/>
    <div class="">
        <div class="pull-left">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第{{pageData.page}}页/共{{pageData.remaining_pages}}页&nbsp;&nbsp;&nbsp;&nbsp;总共{{pageData.count}}条数据
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="column"></span>
        </div>
        <div class="col-md-offset-9 col-lg-offset-8 col-xs-offset-8 col-sm-offset-8">
            <!--所有数据分页-->
            <a href style="text-decoration: none" ng-click="page('-1')" id="shangye">
                <div class="glyphicon glyphicon-step-backward"></div>
                上一页
            </a>
            <!--模糊查询分页-->
            <a href style="text-decoration: none;display: none" ng-click="pages('-1')" id="shangyes">
                <div class="glyphicon glyphicon-step-backward"></div>
                上一页
            </a>
            &nbsp;&nbsp;&nbsp;
            <!--所有数据分页-->
            <a href style="text-decoration: none" ng-click="page('+1')" id="xiaye">
                下一页
                <div class="glyphicon glyphicon-step-forward"></div>
            </a>
            <!--模糊查询分页-->
            <a href style="text-decoration: none;display: none" ng-click="pages('+1')" id="xiayes">
                下一页
                <div class="glyphicon glyphicon-step-forward"></div>
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <!--所有数据分页-->
            <a href style="text-decoration: none" ng-click="page()" id="weiye">
                尾页
                <div class="glyphicon glyphicon-forward"></div>
            </a>
            <!--模糊查询分页-->
            <a href style="text-decoration: none;display: none" ng-click="pages()" id="weiyes">
                尾页
                <div class="glyphicon glyphicon-forward"></div>
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            跳转到&nbsp;<input type="number" min="1" id="JumpPage" style="width: 10%"/>页
            &nbsp;&nbsp;
            <!--所有数据分页-->
            <input type="button" class="btn btn-info" style="width:12%;height:3%" value="跳转" ng-click="page('jump')"
                   id="tiaozhuanye">
            <!--模糊查询分页-->
            <input type="button" class="btn btn-info" style="width:12%;height:3%;display: none" value="跳转"
                   ng-click="pages('jump')"
                   id="tiaozhuanyes">
        </div>
    </div>
</div>
<!-- Modal1 -->
<div class="modal fade bs-example-modal-lg2" id="myModal1" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body" id="modal-bodys">
                <div id="divs" class="pull-right"></div>
                <br/><br/>
                <div class="form-inline" ng-style="myStyle">
                    <div class="col-lg-4">
                        账户名:<input type="text" class="form-control" id="usernames">
                    </div>
                    <div class="col-lg-4">
                        姓名:<input type="text" class="form-control" id="names">
                    </div>
                    <div class="col-lg-4">
                        电话:<input type="tel" class="form-control" id="phones">
                    </div>
                    <br/><br/><br/>
                    <div class="col-lg-4">
                        &emsp;邮箱:<input type="email" class="form-control" id="emails">
                    </div>
                    <div class="col-lg-4">
                        密码:<input type="password" class="form-control" id="passwords">
                    </div>
                    <div class="col-lg-4">
                        性别:<select class="select form-control">
                        <option>请选择</option>
                        <option class="sex" value="男">男</option>
                        <option class="sex" value="女">女</option>
                    </select>
                    </div>
                    <br/><br/><br/>
                    <div class="col-lg-5">
                        &emsp;科室:<select id="kesi" class="selectpickers" title="请选择" multiple></select>
                    </div>
                    <br/><br/><br/><br/><br/>
                </div>
            </div>
            <div class="modal-footer">
                <button type='button' class='btn btn-info' ng-click="insert()">确定</button>
                <button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal2 -->
<div class="modal fade bs-example-modal-lg2" id="myModal2" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <div id="div" class="pull-right"></div>
                <br/><br/>
                <div class="form-inline" ng-style="myStyle">
                    <div class="col-lg-4">
                        用户姓名:<input type="text" class="form-control" ng-model="datas.name"
                                    value="datas.name">
                    </div>
                    <div class="col-lg-4">
                        电话:<input type="tel" class="form-control" ng-model="datas.phone"
                                  value="datas.phone">
                    </div>
                    <div class="col-lg-4">
                        邮箱:<input type="email" class="form-control" ng-model="datas.email"
                                  value="datas.email">
                    </div>
                    <br/><br/><br/><br/>
                    <div class="col-lg-4">
                        &emsp;&nbsp;&nbsp;
                        性别:
                        <select class="selects form-control">
                            <option>请选择</option>
                            <option class="sexs" value="男">男</option>
                            <option class="sexs" value="女">女</option>
                        </select>
                    </div>
                    <div class="col-lg-4">
                        科室:
                        <select id="keshis" name="keshi" class="selectpicker" title="请选择" multiple>
                        </select>
                    </div>
                    <br/><br/><br/><br/><br/>
                </div>
            </div>
            <div class="modal-footer" id="buttons"></div>
        </div>
    </div>
</div>
</body>
</html>
